<template>
  <KView class="shop-mall">
    <page-header title="店铺详情" @back-click="toBack"></page-header>
    <template v-if="shopMallData!==null">
      <KView class="shop-mall-info clearfix">
        <KView class="shop-mall-base">
          <KView class="ellipsis shop-mall-name">{{shopMallData.name}}</KView>
          <KView class="shop-mall-score clearfix">
            <KView class="shop-mall-score-star">
              <sys-star-text :star="shopMallData.star" :size="24"></sys-star-text>
            </KView>
            <!-- <KView class="shop-mall-score-text">{{shopMallData.score}}</KView> -->
          </KView>
        </KView>
        <KView class="shop-mall-avatar">
          <sys-avatar :url="shopMallData.headImg" shape="circle"></sys-avatar>
        </KView>
      </KView>
      <KView class="shop-mall-content">
        <shop-tab :menus="tabMenus" v-model="currentTab" @change="tabChange">
          <shop-goods class="shop-mall-content-tab" v-if="tabShow['goods']" :class="{'is_show':currentTab==='goods'}" :params="params"
            @goods-click="toGoodsDetail">
          </shop-goods>
          <shop-evaluate class="shop-mall-content-tab" v-if="tabShow['evaluate']" :class="{'is_show':currentTab==='evaluate'}" :params="params"
            :shop-data="shopMallData">
          </shop-evaluate>
        </shop-tab>
      </KView>
    </template>
  </KView>
</template>

<script>
  import ShopMallApi from 'services/shopMallApi';

  import SystemUtil from 'utils/systemUtil';
  import HistoryUtil from 'utils/historyUtil';

  import PageHeader from 'common/pageHeader';
  import SysAvatar from 'common/sysAvatar';
  import SysStarText from 'common/sysStarText';
  import ShopTab from './shopTab';
  import ShopGoods from './shopGoods';
  import ShopEvaluate from './shopEvaluate';

  export default {
    props: {
      hasBack: {
        type: Boolean,
        default: true
      }
    },

    data() {
      return {
        isMiniprogram: process.env.isMiniprogram,
        params: this.getParams(),
        shopMallData: null,
        currentTab: 'goods',
        tabShow: {
          goods: true,
          evaluate: false
        },
        tabMenus: [{
          id: 'goods',
          label: '宝贝'
        }, {
          id: 'evaluate',
          label: '评价'
        }]
      };
    },

    created() {
      SystemUtil.showLoading();
      this.setShopMallData().then(() => {
        SystemUtil.hideLoading();
      }).catch(() => {
        SystemUtil.hideLoading();
      });
    },

    methods: {
      getParams() {
        let query = this.$route.query;
        let params = {};
        let branchId = query.branchId;
        if (branchId !== undefined) {
          params.branchId = Number(branchId);
        }

        let partnerId = query.partnerId;
        if (partnerId !== undefined) {
          params.partnerId = Number(partnerId);
        }
        return params;
      },

      setShopMallData() {
        return ShopMallApi.getShopMallData(this.params).then(shopMallData => {
          this.shopMallData = shopMallData;
          return shopMallData;
        });
      },

      toBack() {
        if (!this.isMiniprogram) {
          window.history.back();
          return;
        }

        if (this.hasBack) {
          let url = HistoryUtil.getUrl();
          if (url === null) {
            wx.navigateBack();
          } else {
            HistoryUtil.delete();
            this.$emit('to-page', url);
          }
        } else {
          this.$emit('to-page', '/home');
        }
      },

      toGoodsDetail(goods) {
        let defId = goods.defId;
        if (SystemUtil.isEmpty(defId)) {
          return;
        }

        if (process.env.isMiniprogram) {
          HistoryUtil.add(HistoryUtil.getCurrentUrl());
          this.$emit('to-page', `/goodsDetail/${defId}`);
        } else {
          this.$router.push({
            path: `/goodsDetail/${defId}`
          });
        }
      },

      tabChange(id) {
        let tabShow = this.tabShow;
        if (!tabShow[id]) {
          tabShow[id] = true;
        }
      },

      toGoodsPage({
        url
      }) {
        HistoryUtil.add(HistoryUtil.getCurrentUrl());
        this.$emit('to-page', url);
      }
    },

    components: {
      PageHeader,
      SysAvatar,
      SysStarText,
      ShopTab,
      ShopGoods,
      ShopEvaluate
    }
  };

</script>

<style lang="scss">
  .shop-mall {
    height: 100%;

    .shop-mall-info {
      margin: formatPx(50) formatPx(30) 0;
      padding: formatPx(35) formatPx(30);
      box-shadow: 0 formatPx(2) formatPx(10) formatPx(5) rgba(0, 0, 0, .14);
      border-radius: formatPx(8);
      height: formatPx(120);

      .shop-mall-base {
        float: left;
        width: formatPx(500);

        .shop-mall-name {
          font-size: formatPx(34);
          color: #2f3135;
        }

        .shop-mall-score {
          margin-top: formatPx(25);

          >div {
            float: left;
            height: formatPx(24);
          }

          .shop-mall-score-star {
            width: formatPx(175);
            margin-right: formatPx(10);
          }

          .shop-mall-score-text {
            font-size: formatPx(26);
            color: #ffa814;
            line-height: formatPx(24);
            vertical-align: top;
          }
        }
      }

      .shop-mall-avatar {
        float: right;
        width: formatPx(117);
        height: formatPx(117);
      }
    }

    .shop-mall-content {
      margin-top: formatPx(60);
      height: calc(100% - #{formatPx(360)});
      overflow: auto;

      .shop-mall-content-tab {
        display: none;

        &.is_show {
          display: block;
        }
      }
    }
  }

</style>
